<!DOCTYPE html>
<div th:replace="~{ backend/app :: layout ('博客列表', _, ~{::#main}, _) }" xmlns:th="http://www.thymeleaf.org">

<div class="content-wrapper" id="main">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-12 d-flex justify-content-between">
                        <h1>博客列表</h1>
                        <a href="/backend/blog/add">创建新博客</a>
                    </div>
                </div>
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <form method="get" class="form-inline">
                                    <div class="input-group" style="width: 300px;">
                                        <input type="text" name="keyword" class="form-control"
                                               placeholder="搜索博客标题..." th:value="${keyword}">
                                        <div class="input-group-append">
                                            <button type="submit" class="btn btn-default">
                                                <i class="fas fa-search"></i>
                                            </button>
                                            <a th:if="${!#strings.isEmpty(keyword)}" href="/backend/blog"
                                               class="btn btn-default"
                                               title="清除搜索条件">
                                                <i class="fas fa-times"></i>
                                            </a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="card-body table-responsive p-0">
                                <table class="table table-hover text-nowrap">
                                    <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Title</th>
                                        <th>CreatedAt</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tbody th:each="blog : ${page.getContent()}">
                                    <tr>
                                        <th th:text="${blog.id}">blog.id</th>
                                        <td><a th:href="@{'/blog/' + ${blog.id}}" target="_blank" th:text="${blog.title}">blog.title</a></td>
                                        <td th:text="${#temporals.format(blog.created_at, 'yyyy-MM-dd HH:mm:ss')}"></td>
                                        <td class="center">
                                            <a href="#" th:href="@{'/backend/blog/edit/' + ${blog.id}}" class="text-sm">
                                                <i class="fas fa-edit"></i>
                                                Edit
                                            </a>
                                            <a class="text-sm pl-3" href="/backend/blog/delete/id" th:href="@{'/backend/blog/delete/' + ${blog.id}}">
                                                <i class="fas fa-trash"></i>
                                                Remove
                                            </a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card 分页-->
                        <div id="pagination-container" class="pt-1">
                            <p class="text-muted p-1">当前第 [[${page.getNumber()+1}]] 页，总计 [[${page.getTotalPages()}]] 页，共 [[${page.getTotalElements()}]] 条记录</p>
                            <nav aria-label="Page navigation example">
                                <ul class="pagination">
                                    <li class="page-item" th:if="${page.hasPrevious()}">
                                        <a class="page-link" href="#" th:href="${'/backend/blog?page=' + page.getNumber() + (#strings.isEmpty(keyword) ? '' : '&keyword=' + keyword)}">Previous</a>
                                    </li>
                                    <li th:class="${currentPageNumber == page.getNumber() + 1 ? 'page-item active' : 'page-item'}" class="page-item"
                                        th:each="currentPageNumber:${#numbers.sequence(1, page.getTotalPages())}">
                                        <a class="page-link" th:href="${'/backend/blog?page=' + currentPageNumber + (#strings.isEmpty(keyword) ? '' : '&keyword=' + keyword)}" href="#" th:text="${currentPageNumber}">页码</a>
                                    </li>
                                    <li class="page-item" th:if="${page.hasNext()}">
                                        <a class="page-link" href="#" th:href="${'/backend/blog?page=' + (page.getNumber() + 2) + (#strings.isEmpty(keyword) ? '' : '&keyword=' + keyword)}">Next</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                </div>
             </div>
            </div>
        </section>
    </div>

</div>
